<div class="form-group">
    <div class="input-group mb-3" ng-controller="PortalTemplateController as master">
        <select class="btn btn-outline-secondary custom-select col-sm-4" ng-model="master.activedTemplate" ng-init="master.templates = master.loadTemplates(-1, 'layout', 'Masters')" ng-options="item as item.fileName for item in master.templates track by item.id" ng-change="master.updateEditors()"></select>
        <input class="form-control sel-filename" type="text" id="Layout" name="Layout" value="{{master.activedTemplate.fileName}}" placeholder="_BlankLayout">
    </div>
</div>
<div ng-controller="PortalTemplateController as layout">
    <div class="form-group">
        <h6>Layout</h6>
        <div class="input-group mb-3">
            <select class="btn btn-outline-secondary custom-select col-sm-4" ng-model="layout.activedTemplate" ng-init="layout.templates = layout.loadTemplates($ctrl.template.id, '', $ctrl.template.folderType)" ng-options="item as item.fileName for item in layout.templates track by item.id" ng-change="layout.updateEditors()"></select>

            <input class="form-control sel-filename" type="text" ng-model="$ctrl.template.fileName" value="{{layout.activedTemplate.fileName}}" placeholder="Input template name here...">
            <input class="template-id" type="hidden" ng-model="$ctrl.template.id" value="{{layout.activedTemplate.id}}">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header-nav-pills">
                    <ul class="nav nav-pills text-center" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-template-razor-tab" data-toggle="pill" href="#pills-template-razor" role="tab" aria-controls="pills-template-razor" aria-selected="true">Razor Template</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-template-general-tab" data-toggle="pill" href="#pills-template-general" role="tab" aria-controls="pills-template-general" aria-selected="true">General Template</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-template-mobile-tab" data-toggle="pill" href="#pills-template-mobile" role="tab" aria-controls="pills-template-mobile" aria-selected="false">Mobile Template</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-template-others-tab" data-toggle="pill" href="#pills-template-others" role="tab" aria-controls="pills-template-others" aria-selected="false">Others</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-1">
                    <div class="tab-content" id="pills-tabContent">

                        <div class="tab-pane fade active show" id="pills-template-razor" role="tabpanel" aria-labelledby="pills-template-razor-tab">

                            <div class="container-code-editor">
                                <div class="form-control code-editor">{{layout.activedTemplate.content}}</div>
                                <input class="form-control code-content" type="hidden" ng-model="$ctrl.template.content" value="{{layout.activedTemplate.content}}">
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-template-general" role="tabpanel" aria-labelledby="pills-template-general-tab">

                            <div class="container-code-editor">

                                <div class="form-control code-editor">{{layout.activedTemplate.spaContent}}</div>
                                <input class="form-control code-content" type="hidden" ng-model="$ctrl.template.spaContent" value="{{layout.activedTemplate.spaContent}}">
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-template-mobile" role="tabpanel" aria-labelledby="pills-template-mobile-tab">

                            <div class="container-code-editor">

                                <div class="form-control code-editor json">{{layout.activedTemplate.mobileContent}}</div>
                                <input class="form-control code-content" type="hidden" ng-model="$ctrl.template.mobileContent" value="{{layout.activedTemplate.mobileContent}}">
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-template-others" role="tabpanel" aria-labelledby="pills-template-others-tab">

                            <div class="row">
                                <div class="col-3">
                                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                        <a class="nav-link active show" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false">Scripts</a>
                                        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true">Styles</a>
                                    </div>
                                </div>
                                <div class="col-9">
                                    <div class="tab-content" id="v-pills-tabContent">
                                        <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

                                            <div class="container-code-editor">
                                                <div class="form-control code-editor">{{layout.activedTemplate.scripts}}</div>
                                                <input class="form-control code-content" ng-model="$ctrl.template.scripts" type="hidden" value="{{layout.activedTemplate.scripts}}">
                                            </div>
                                        </div>
                                        <div class="tab-pane fade active show" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                            <div class="container-code-editor">
                                                <div class="form-control code-editor">{{layout.activedTemplate.styles}}</div>
                                                <input class="form-control code-content" type="hidden" ng-model="$ctrl.template.styles" value="{{layout.activedTemplate.styles}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script defer="defer" src="~/app/controllers/portal-template-controller.js"></script>
